<template>
	<view class="page">
		<comHead :datas="datasObj"></comHead>

		<!--tab栏  -->
		<view class="top_model flex-bwt pd-30">
			<view class="tabBar flex-eve">
				<view class="item mr-20 ft c-66 flex-center" :class="{ active: selectId === item.id }"
					v-for="(item, index) in tableList" :key="index" @click="selectBtn(index, item)">{{ item.name }}
				</view>
			</view>
			<view class="edit_box flex" v-if="!isEdit">

				<view class="edit ft-24 c-99 bd-r20" @click="openDelete()">
					清空
					<image class="icons" :src="`https://cdn.oss.bon-top.cn/static_bc/images/clear_no.png`"
						mode="aspectFill"></image>
				</view>
				<text class="line"
					style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"></text>
				<view class="edit ft-24 c-33 bd-r20" @click="changeEdit()">
					管理
					<image class="icons" :src="`https://cdn.oss.bon-top.cn/static_bc/images/edit_icon_black.png`"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="edit editactive ft-24 c-33 bd-r20" v-else @click="changeEdit()">
				完成

			</view>

		</view>
		<view class="box100">
			<view class="nextCard">
				<view style="width: 100%;">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
						<template v-for="(item, index) in tipListSC" :key="index">
							<view class="scroll-view-item_A ft flex-center"
								:class="collectIndex == item.id ? 'scroll-view-item_A_active' : ''"
								@click="collectFun(item)" v-if="selectId == 1 || item.id != 5">
								{{ item.name }}
							</view>
						</template>
					</scroll-view>
				</view>
				<!-- 列表 -->
				<view class="cardList_box" v-if="selectId == 1" v-for="data in dataList" :key="data.id">
					<view class="c-33 fw-800 ft-28 bg_time bd-r20">{{ data.time_str }}</view>
					<view class="flex mb-20" v-for="item in data.list" :key="item.id">

						<view class="cardList_box_item" :style="{ transform: `translateX(${item.offsetX}px)` }"
							@touchstart="handleTouchStart($event, item)" @touchmove="handleTouchMove"
							@touchend="handleTouchEnd">
							<view class="cardList auto flex fs0" v-if="selectId == 1">
								<view class="checkBox mr-8 ml-10" v-if="isEdit">
									<view class="yuan" @tap.stop="changCheckd(item)">
										<image class="icons" v-if="item.click"
											:src="`https://cdn.oss.bon-top.cn/static_bc/images/check.png`"
											mode="aspectFill">
										</image>
										<view class="bd-r50c noCheckd" v-else></view>
									</view>
								</view>
								<view class="card auto pd-12"
									@click="goPage('/subpackage/immigration/immigration?id=' + item.id)">
									<view class="absu" v-if="item.is_sellout == 1">
										<image class="iamg"
											src="https://cdn.oss.bon-top.cn/static_bc/images/slodOut.png"></image>
									</view>
									<view class="flex">
										<view class="left" style="flex-shrink: 0;">
											<image class="wh-100 bd-r40" :src="item.cover" mode="aspectFill">
											</image>
										</view>
										<view class="right ml-20 te-wid">
											<view class="top1 flex mt-30 te-wid">
												<view class="flex fs0" v-if="item.recommends_show">
													<view class="tip ft ft-20 flex-center mr-10"
														v-for="(tag, index) in item.recommends_show" :key="index">
														{{ tag }}
													</view>
												</view>
												<view style="width: 240rpx;" class="title  ft-lue ft ft-32 fw-800">
													{{ item.name }}</view>
											</view>
											<view class="midel flex mt-10">
												<text class="ft mr-10 c-99" v-for="(tag, index) in item.tags"
													:key="index">
													<text v-if="index === item.tags.length - 1">{{ tag.name }}</text>
													<text v-else> {{ tag.name + " | " }}</text>
												</text>
											</view>
											<view class="domn flex mt-20">
												<view class="price pd-10">
													<view class="ft">白菜价</view>
													<text style="
															font-weight: 800;
															font-size: 20rpx;
															color: #333333;
															margin-top: 8rpx;
															">
														{{ item.currency_symbol }}
														<text style="
																font-family: 'DIN COROS';
																font-weight: 400;
																font-size: 28rpx;
																color: #333333;
																">
															{{ item.bc_price_show }}</text>
														{{ item.bc_price_unit }}</text>
												</view>
												<image class="wh-37" style="margin: 0 20rpx;"
													src="https://cdn.oss.bon-top.cn/static_bc/images/price1.png">
												</image>
												<view class="price2 pd-10">
													<view class="ft">同行价</view>
													<text v-if="item.peer_price_show > 0"
														style="font-weight: 800; font-size: 20rpx; color: #999999">
														{{ item.currency_symbol }}
														<text style="
															font-family: 'DIN COROS';
															font-weight: 400;
															font-size: 28rpx;
															color: #999999;
															">
															{{ item.peer_price_show }}
														</text>
														{{ item.peer_price_unit }}</text>
													<text v-else
														style="font-weight: 800; font-size: 20rpx; color: #999999">
														{{ "暂无价格" }}
													</text>
												</view>
											</view>
										</view>
									</view>
									<view class="foot auto mt-20 flex-bwt">
										<view class="arrow ml-12">
											<text class="ft" v-if="item.brand_info">{{ "项目方:" + item.brand_info.name
											}}</text>
											<text class="ft" v-else>{{ "项目方:暂无数据" }}</text>
										</view>
										<view class="down flex mr-12">
											<image class="wh-24"
												src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png">
											</image>
											<text class="ft" style="margin-left: 8rpx" v-if="item.country_info">
												{{ item.country_info.name }}</text>
											<text class="ft" style="margin-left: 8rpx" v-else> {{ '暂无数据' }}</text>
										</view>
									</view>
								</view>

							</view>



						</view>
						<view class="delete-btn bd-r20 ft-24 flex-center"
							:style="{ transform: `translateX(${item.offsetX}px)` }" @tap="deleteItem(item.id)"
							v-if="!isEdit">删除浏览</view>
					</view>
				</view>


				<view class="mt-20" v-if="selectId == 2">
					<template v-for="data in dataList" :key="data.id">
						<view class="c-33 fw-800 ft-28 bg_time bd-r20">{{ data.time_str }}</view>
						<view class="vedio flex-bwt-wrap pd-30">

							<template v-for="video in data.list" :key="video.id">
								<view class="vedioItem"
									@click="goPage(`/pages/category/category?id=${video.id}&isReback=${true}`)">
									<image style="border-radius: 40rpx" class="bg wh-100" :src="video.cover"
										mode="aspectFill">
									</image>
									<image class="play wh-56"
										src="https://cdn.oss.bon-top.cn/static_bc/images/play.png">
									</image>
									<view class="card flex pd-12" v-if="video.product_info">
										<view class="avtor">
											<image class="wh-56 bd-r50c" :src="video.sale_info.avatar"
												mode="aspectFill"></image>
											<image class="huiyuan" v-if="video.sale_info?.is_official"
												src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
										</view>
										<view class="desc ml-12 te-wid" v-if="video.product_info">
											<view class="ft1 te-1">{{ video.product_info.name }}</view>
											<view class="ft3"><span v-for="tag in video.product_info.tags.slice(0, 2)"
													:key="tag.id">{{
														' #'
														+
														tag.name }}</span> </view>
										</view>
										<view class="card_bg"></view>
									</view>

									<view class="checkBox mr-8" v-if="isEdit">
										<view class="yuan" @click.stop="changCheckd(video)">
											<image class="icons" v-if="video.click"
												:src="`https://cdn.oss.bon-top.cn/static_bc/images/check.png`"
												mode="aspectFill"></image>
											<view class="bd-r50c noCheckd" v-else></view>
										</view>
									</view>

								</view>
							</template>
						</view>
					</template>
				</view>

				<view class="com-empty" v-if="dataList.length == 0">暂无数据</view>
				<!-- </comLoadMord> -->

				<view style="height: 100px;"></view>

			</view>

		</view>
		<view class="bot_flex flex-bwt" v-if="isEdit">
			<view class="checkBox mr-8">
				<view class="yuan flex " @click="changCheckdAll()">
					<image class="icons mr-4" v-if="checkdAll"
						:src="`https://cdn.oss.bon-top.cn/static_bc/images/check.png`" mode="aspectFill"></image>
					<view class="bd-r50c noCheckd mr-4" v-else></view>
					全选
				</view>
			</view>
			<view class="btn bd-r20" @click="deledtEdit()">删除浏览{{ checkIds.length }}）</view>
		</view>
	</view>
	<u-modal :show="showModal" :title="modelInfo.title" cancelText="取消" :content='modelInfo.content'
		contentTextAlign="center" showCancelButton @confirm="confirm" @cancel="cancel"></u-modal>
</template>


<script setup lang="js">
import {
	onBeforeMount,
	onMounted,
	reactive,
	ref
} from 'vue';
import comLoadMord from "@/components/comLoadMord.vue";
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '浏览历史',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	isBorder: true
})

const offsetX = ref(0) // 滑动偏移量
const startX = ref(0)  // 触摸起始位置
const isMoving = ref(false)
const deleteWidth = ref(-80 - 20) // 删除按钮宽度(负数)按钮加边距
const selectItemId = ref(null)
// 触摸开始
const handleTouchStart = (e, item) => {
	if (isEdit.value) return
	startX.value = e.touches[0].clientX
	isMoving.value = true
	console.log('item', item)
	selectItemId.value = item.id
}
const getItem = () => {
	let _item = dataList.value.find(f => f.list.find(chidf => chidf.id == selectItemId.value))
	let _find = _item.list.reduce((a, b) => {
		if (b.id == selectItemId.value) a = b
		return a
	}, [])
	return _find
}
// 触摸移动
const handleTouchMove = (e) => {
	if (!isMoving.value) return
	let _find = getItem()

	// 滑动时 将其他的模块重置回0

	const currentX = e.touches[0].clientX
	const diffX = currentX - startX.value

	// 限制最大滑动距离
	if (diffX < deleteWidth.value) {
		offsetX.value = deleteWidth.value
		_find.offsetX = deleteWidth.value
	} else if (diffX > 0) {
		offsetX.value = 0
		_find.offsetX = 0

	} else {
		offsetX.value = diffX
		_find.offsetX = diffX

	}

}

// 触摸结束
const handleTouchEnd = () => {
	if (!isMoving.value) return
	isMoving.value = false
	let _find = getItem()

	// 判断是否达到删除阈值
	if (offsetX.value < deleteWidth.value * 0.6) {
		offsetX.value = deleteWidth.value
		_find.offsetX = deleteWidth.value

	} else {
		offsetX.value = 0
		_find.offsetX = 0

	}
	// dataList.value.forEach(f => {
	// 	if (f.id != selectItemId.value) f.offsetX = 0
	// })
}

const selectId = ref(1)
const tableList = ref([{
	id: 1,
	name: '产品',
	num: 0
},
{
	id: 2,
	name: '视频',
	num: 0
},

])
const tipListSC = ref([{
	id: 1,
	name: '全部',
	key: ''
},
{
	id: 2,
	name: '移民',
	key: '移民'
},
{
	id: 3,
	name: '教育',
	key: '教育'
},
{
	id: 4,
	name: '服务',
	key: '附加服务'
},

])
const showPup = ref(false)
const openDelete = () => {
	showModal.value = true
	modelInfo.value.type = 2
	modelInfo.value.title = '清空浏览历史'
	modelInfo.value.content = '确定要清空产品浏览历史吗？'
	isAll.value = 1
}
const collectIndex = ref(1)
const collectName = ref('')

const scroll = () => { }
// 取消收藏
const checkIds = ref([])
const changeCheckIds = () => {
	checkIds.value = []
	dataList.value.map(f => {
		f.list.map(item => {
			if (item.click) {
				checkIds.value.push(item.id)
			}
		})
	})
}
const deledtEdit = () => {
	// isEdit.value = false
	modelInfo.value.type = 1
	modelInfo.value.title = '删除浏览历史'
	modelInfo.value.content = '确定要删除浏览历史吗？'
	deleteItem(checkIds.value)
}
// 触摸结束处理
const resetOffsetX = () => {
	dataList.value.forEach(item => {
		item.list.forEach(f => {

			f.offsetX = 0
		})
	})
	checkdAll.value = false
	console.log('jjj', dataList.value)
}
const movableWidth = ref('calc(100% + 160rpx)')
const contentxxWidth = ref('calc(100% - 160rpx)')
const changeEdit = () => {
	resetOffsetX()

	isEdit.value = !isEdit.value
	if (isEdit.value) {
		contentxxWidth.value = '100%'
		movableWidth.value = '100%'
	} else {
		movableWidth.value = 'calc(100% + 160rpx)'
		contentxxWidth.value = 'calc(100% - 160rpx)'
		dataList.value.forEach(item => {
			item.list.forEach(f => {
				f.click = false
			})
		})
	}
	changeCheckIds()
}
const isEdit = ref(false)
const checkdAll = ref(false)

const changCheckdAll = () => {
	checkdAll.value = !checkdAll.value
	dataList.value.map(f => {
		f.list.map(item => item.click = checkdAll.value)
	})
	changeCheckIds()
}
const changCheckd = (data) => {
	dataList.value.forEach(f => {
		f.list.forEach(item => {

			if (item.id == data.id) item.click = !item.click
		})
	})
	checkdAll.value = dataList.value.every(e => e.click)
	changeCheckIds()
}
// 选项点击切换

const selectName = ref('')
const iconUrl = ref('')
const itemHeight = ref(220)

const selectBtn = async (idx, item) => {
	selectId.value = item.id
	selectName.value = item.name
	iconUrl.value = item.url

	collectIndex.value = 1
	collectName.value = ''

	if (idx == 0) {
		itemHeight.value = 220
	} else if (idx == 2) {
		itemHeight.value = 450
	}
	cancel()
	isEdit.value = false
	reloadData()

}
// 删除项目
const deleteItem = (id) => {
	productId.value = selectId.value == 1 ? id : 0
	videoId.value = selectId.value == 2 ? id : 0
	showModal.value = true
	isAll.value = 0

}
const modelInfo = ref({
	type: 1,//1:删除 2:清空
	title: '删除浏览历史',
	content: '确定要删除浏览历史吗？',
})
const confirm = () => {
	// let obj = {
	// 	product_id: productId.value,
	// 	view_type: selectId.value,
	// 	video_id: videoId.value,
	// 	is_all: isAll.value
	// }
	// console.log('数据', obj)
	utils
		.request(
			api.viewDelete, {
			product_id: productId.value,
			view_type: selectId.value,
			video_id: videoId.value,
			is_all: isAll.value
		},
			"post"
		)
		.then((res) => {
			showModal.value = false

			getCountData()
			reloadData()
		});
}
// 筛选项目类型
const collectFun = (item) => {
	collectIndex.value = item.id
	collectName.value = item.key
	isEdit.value = false
	cancel()

	reloadData()
}


const showModal = ref(false)
const productId = ref(0)
const videoId = ref(0)
const isAll = ref(0)

// 取消
const cancel = () => {
	productId.value = 0
	videoId.value = 0
	showModal.value = false
	isAll.value = 0
	checkdAll.value = false
	// 清空checkBox选择
	dataList.value.map(f => {
		f.list.map(item => {
			item.click = false
		})
	})
}


const reloadData = () => {
	dataPage.value = 1
	dataList.value = []
	dataLoading.value = true
	getListData()
}

const dataPage = ref(1)
const dataList = ref([])
const dataLoading = ref(true)
const getListData = () => {
	if (!dataLoading.value) {
		return
	}
	uni.showLoading()
	dataLoading.value = false

	// 项目

	utils
		.request(
			api.getViewList, {
			page: dataPage.value,
			pageSize: 10,
			cate_name: collectName.value,
			view_type: selectId.value
		},
			"post"
		)
		.then((res) => {
			dataPage.value++
			uni.hideLoading()

			if (res.data.items.length > 0) {
				const itemData = res.data.items.map(item => {
					item.x = 0
					item.click = false
					return item
				})
				dataList.value = dataList.value.concat(itemData)
				console.log('dataList.value', dataList.value)
				let num = dataList.value.reduce((a, b) => {
					a += Number(b.list.length)
					return a
				}, 0)
				console.log('哈哈哈哈', num)
			}

		});
	// 视频
};

onReachBottom(() => {
	getListData()
})

const getCountData = () => {
	utils
		.request(
			api.getUserConllectCount, {},
			"post"
		)
		.then((res) => {
			tableList.value[0].num = res.data.product_count
			tableList.value[1].num = res.data.video_count
			tableList.value[2].num = res.data.case_count
		});
}

onLoad(() => {
	getListData()
})

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url
	})
}
</script>

<style lang="scss" scoped>
.top_model {
	.edit_box {
		background: linear-gradient(to bottom, #FBFFDF, #FFFFFF);

	}

	.edit {
		width: 114rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;

		.icons {
			width: 22rpx;
			height: 22rpx;
		}


	}

	.editactive {
		background: linear-gradient(to bottom, #333, #333);
		color: #dbf046;
	}
}



.tabBar {
	.item {
		padding: 0 20rpx;
		height: 72rpx;
		background: #f8f8f8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.active {
		background: #dbf046;
	}
}

.checkBox {
	flex-shrink: 0;

	.noCheckd {
		width: 26rpx;
		height: 26rpx;
		border: 2rpx solid #000
	}

	.icons {
		width: 28rpx;
		height: 28rpx;
	}
}

.bg_time {
	background: linear-gradient(to bottom, #F8F8F8, #f8f8f800);
	margin: 0 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 20rpx;

}

.cardList_box {
	position: relative;
	width: 100%;
	margin: 20rpx 0;
	// background-color: #fff;
	overflow: hidden;
	border-radius: 40rpx;
	box-sizing: border-box;
	// background-color: red;

	&_item {
		width: 100%;
		position: relative;
		transition: transform 0.3s ease;
		z-index: 2;
		// background-color: #fff;
		flex-shrink: 0;


	}



	.delete-btn {
		width: 160rpx;
		height: auto;
		background-color: #FFF3EC;
		color: #9C0000;
		flex-shrink: 0;
		text-align: center;
		transition: transform 0.3s ease;
		align-self: stretch;
		margin-right: 20rpx;


		text {
			font-size: 28rpx;
		}
	}
}

.nextCard {
	// width: 700rpx !important;
	width: 100%;
	// background-color: red;
	// position: relative;
	// background-color: red;
	// overflow: hidden;
	box-sizing: border-box;
	// height: calc(100vh - 520rpx);

	.bg {
		width: 100%;
		height: 100%;
		background: #000;
		// opacity: 0.1;
		position: absolute;
		top: 120rpx;
		z-index: 2;
		border-radius: 40rpx;

	}

	.menu_box {
		height: 170rpx;

		.menu_box_list {
			.active {
				color: #333333;
				font-weight: 900;
			}

			// position: relative;
			.tipItemActive {
				color: rgb(250, 92, 35);
			}

			.tipBox_list_model {
				background-color: gold;
				// position: absolute;
				left: 0;
				width: 100%;
				z-index: 3;
				border-radius: 40rpx;



				.tipBox_list {
					width: 100%;
					height: 200rpx;
					// position: absolute;
					background-color: #fff;
					top: 0rpx;
					z-index: 3;
					border-radius: 40rpx;
					padding: 20rpx 30rpx 0 30rpx;
					// margin-top: 10rpx;

					.tipItem {
						width: 100%;
						border-top: 2rpx solid #f1f1f1;
						padding: 10rpx 0;
						margin-left: 30rpx;
						color: #666;
					}



					.tipItem:first-child {
						border: none;

					}
				}
			}
		}
	}

	.jiantou {
		width: 30rpx;
		height: 18rpx;
	}

	.imgdeg {
		transform: rotate(180deg);
	}

	.tabTwo {
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(180deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;


		// .tipBox_list {
		//   width: 100%;
		//   height: 200rpx;
		//   background-color: red;
		//   // position: absolute;
		// }

		.left {
			.item {
				// margin-right: 24rpx;
				// border-right: #ccc 4rpx solid;
				// padding-right: 8rpx;
				// position: relative;
				display: flex;
				align-items: center;

			}

			.item:last-child {
				border: none;
			}

			// .tipBox {
			//   width: 100vm;
			//   height: 218rpx;
			//   z-index: 99;
			//   //border: 2rpx solid red;
			//   position: absolute;
			//   left: -20rpx;

			//   .tipList {
			//     position: absolute;
			//     top: 32rpx;
			//     left: 0;
			//     text-align: center;
			//     line-height: 60rpx;
			//   }
			// }
		}
	}

	.qiehuan {
		// border: 2rpx solid red;
		width: 198rpx;
		height: 54rpx;
		background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.cardList {
		height: 100%;

		// width: 50%;
		.card {
			position: relative;
			width: 690rpx;
			// width: 100%;
			height: 100%;
			// height: 408rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #f1f1f1;

			.absu {
				position: absolute;
				top: 30rpx;
				right: 0rpx;
				opacity: 0.3;

				.iamg {
					width: 155rpx;
					height: 138rpx;
				}
			}

			.left {
				width: 222rpx;
				height: 274rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				flex-shrink: 0;
			}

			.right {
				flex: 1;
				height: 274rpx;

				.active {
					color: #333333;
					font-weight: 900;
				}


				.top1 {

					.tip {
						// width: 88rpx;
						display: inline-block;
						line-height: 36rpx;
						box-sizing: border-box;
						height: 36rpx;
						background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						flex-shrink: 0;
						padding: 5rpx 8rpx;


					}

				}

				.domn {
					.price {
						// width: 148rpx;
						height: 92rpx;
						background: linear-gradient(90deg,
								#fff5f3 0%,
								rgba(255, 245, 243, 0) 100%);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					.price2 {
						// width: 148rpx;
						height: 92rpx;
						background: #fff;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						// margin-left: 30rpx;
					}
				}

				.midel {}
			}

			.foot {
				width: 100%;
				height: 74rpx;
				background: linear-gradient(92deg,
						#f8f8f8 0%,
						rgba(248, 248, 248, 0) 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
			}
		}

		.caseItem {
			width: 690rpx;
			// height: 782rpx;
			// margin-bottom: 20rpx;
			background: #f8f8f8;
			border-radius: 40rpx;
			border: 1rpx solid #f8f8f8;

			.detail {
				width: 170rpx;
				height: 54rpx;
				background: #ffffff;
				border-radius: 20rpx;
			}

			.group {
				width: 148rpx;
				height: 186rpx;
				border-radius: 40rpx;
				overflow: hidden;
				position: relative;
				flex-shrink: 0;
				margin-right: 20rpx;

				.play-icon {
					position: absolute;
					top: 12rpx;
					left: 12rpx;
					width: 36rpx;
					height: 36rpx;
					z-index: 1;
				}

				.img-count {
					display: none;
				}
			}

			.imgGroup {
				.group:nth-child(4) {
					.img-count {
						display: flex;
						width: 54rpx;
						height: 52rpx;
						// background: #F8F8F8;
						background: rgba(248, 248, 248, 0.3);
						border-radius: 26rpx;
						font-weight: 800;
						font-size: 22rpx;
						color: #333333;
						position: absolute;
						bottom: 10rpx;
						right: 10rpx;
						z-index: 2;
						backdrop-filter: blur(30rpx);
						-webkit-backdrop-filter: blur(30rpx);
					}
				}
			}

			.watch {
				width: 650rpx;
				height: 74rpx;
				background: linear-gradient(180deg,
						rgba(255, 255, 255, 0) 0%,
						#ffffff 100%);
				border-radius: 0rpx 0rpx 40rpx 40rpx;
			}



			.nameplate {
				width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 8rpx;
				line-height: 36rpx;
			}

			.tcard {
				padding-left: 20rpx;
				padding-right: 20rpx;
				height: 58rpx;
				background: #f1f1f1;
				border-radius: 34rpx;
			}
		}
	}


	.vedio {
		padding-top: 20rpx;

		.vedioItem {
			width: 334rpx;
			height: 614rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			//border: 1rpx solid red;
			margin-bottom: 16rpx;
			position: relative;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}

			.play {
				position: absolute;
				top: 297rpx;
				left: 147rpx;
				z-index: 3;
			}

			.card {
				width: 314rpx;
				height: 82rpx;
				// background: #ffffff;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				position: absolute;
				bottom: 10rpx;
				left: 10rpx;
				z-index: 10;
				overflow: hidden;

				.avtor {
					border-radius: 50%;
					width: 56rpx;
					height: 56rpx;
				}

				.card_bg {
					width: 100%;
					height: 82rpx;
					background: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: -1;
					// opacity: 0.7;
					filter: blur(30rpx);
					border-radius: 44rpx;

				}

				.huiyuan {
					width: 22rpx;
					height: 20rpx;
					position: absolute;
					bottom: 10rpx;
					left: 44rpx;
					z-index: 12;
				}

			}

			.checkBox {
				position: absolute;
				z-index: 99;
				left: 20rpx;
				top: 20rpx;
			}
		}
	}


	.scroll-view_H {

		margin-top: 24rpx;
		white-space: nowrap;

	}

	.scroll-view-item_A {
		//border: 2rpx solid green;
		display: inline-block;
		height: 58rpx;
		background: #ffffff;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		border: 2rpx solid #f1f1f1;
		margin-right: 20rpx;
		line-height: 58rpx;
		text-align: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-left: 24rpx;

	}

	.scroll-view-item_A_active {
		margin-left: 24rpx;
		background: #000;
		color: #f1f1f1;
	}
}

.movable-area {
	width: 100%;
	margin-top: 20rpx;
	position: relative;
	// background-color: red;
}

.movable-view {
	width: calc(100% + 160rpx);
	/* 内容+删除按钮总宽度 */
	height: 100%;
	display: flex;
	box-sizing: border-box;
	// padding: 20rpx;
}

.contentxx {
	width: calc(100% - 160rpx);
	/* 占可视区域宽度 */
	// background: #fff;
	// padding: 20rpx;
	border-radius: 8rpx;
	// box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	padding: 0 30rpx;
}



.bot_flex {
	// height: 120rpx;
	width: 100%;
	background-color: #F8F8F8;
	position: fixed;
	bottom: 0;
	padding: 0 30rpx;
	box-sizing: border-box;
	z-index: 99;
	padding-top: 10rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));


	.btn {
		width: 60%;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: #333;
		color: #dbf046;
	}

}








// 弹窗样式修改
::v-deep .u-fade-enter-active {
	// background-color: rgba(0,0,0,0.4) !important;
}

::v-deep .u-popup__content {
	border-radius: 40rpx !important;
}

::v-deep .u-modal {
	width: 518rpx !important;
}

::v-deep .u-modal__title {
	font-weight: 800 !important;
	font-size: 32rpx !important;
	color: #333333 !important;
	text-align: center;
	padding-top: 30rpx !important;
}

::v-deep .u-modal__content {
	height: 160rpx !important;
	padding: 20rpx 30rpx 0rpx !important;
}

::v-deep .u-modal__content__text {
	font-size: 28rpx !important;
	color: #666666 !important;
}

::v-deep .u-line {
	display: none !important;
}

::v-deep .u-modal__button-group {
	padding-bottom: 30rpx;
}

::v-deep .u-modal__button-group__wrapper--cancel {
	width: 184rpx;
	height: 80rpx;
	background: #F8F8F8;
	border-radius: 20rpx;
	flex: unset !important;
	margin-left: 60rpx;
	margin-right: 30rpx;
	color: #333333 !important;
}

::v-deep .u-modal__button-group__wrapper--confirm {
	width: 184rpx;
	height: 80rpx;
	background: #333333;
	border-radius: 20rpx;
	flex: unset !important;
}

::v-deep .u-modal__button-group__wrapper__text {
	font-size: 28rpx !important;
}

::v-deep .u-modal__button-group__wrapper--cancel .u-modal__button-group__wrapper__text {
	color: #333333 !important;
}

::v-deep .u-modal__button-group__wrapper--confirm .u-modal__button-group__wrapper__text {
	color: #DBF046 !important;
}
</style>